<template>
  <div>
    <h1>我是哥哥</h1>
    <p>{{ count }}</p>
    <button @click="ByeBye">取消订阅</button>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
export default {
  name: "Gege",
  data() {
    return {
      count: 0,
      pubId: null,
    };
  },
  //   先订阅,一般初始化环节就订阅 mounted
  mounted() {
    // 订阅有两个参数,第一个是订阅的名字,第二个是一个函数:一般第一个参数写_,第二各参数是订阅的数据
    this.pubId = PubSub.subscribe("count", (_, count) => {
      this.count = count;
    });
  },

  methods: {
    ByeBye() {
      // PubSub.unsubscribe(this.count)
      // 如果直接取消订阅count,将影响其它组件订阅,
      // 因为订阅名一样,取消订阅将会把其他组件订阅一并取消
      PubSub.unsubscribe(this.pubId);

      //unsubscribe也可接受一个订阅id(pubId),
      //   是订阅方法的返回值,可以取消当前组件的当前订阅
    },
  },
};
</script>

<style>
</style>